import React, { PureComponent } from 'react';
import { Modal } from 'antd';
import DescriptionList from '@/components/DescriptionList';

const { Description } = DescriptionList;

export default class SingleModal extends PureComponent {
  constructor(props) {
    super(props);
    const { dataInfo } = this.props;
    this.state = {
      dataInfo: dataInfo && {},
    };
  }

  static getDerivedStateFromProps(nextProps) {
    const newdata = nextProps.dataInfo;
    return {
      dataInfo: newdata,
    };
  }

  handleOk = () => {
    const { onOk } = this.props;
    if (onOk) {
      onOk();
    }
  };

  handleCancle = () => {
    const { onCancel } = this.props;
    if (onCancel) {
      onCancel();
    }
  };

  render() {
    const { dataInfo, isSocial } = this.state;
    const { visible } = this.props;
    return (
      <div>
        <Modal
          title="账户信息"
          visible={visible}
          onOk={this.handleOk}
          onCancel={this.handleCancle}
          width={900}
        >
          <DescriptionList style={{ marginBottom: 24 }}>
            <Description term="客户名称">{dataInfo.custName}</Description>
            {isSocial ? (
              <Description term="社保账户名称">{dataInfo.accoName}</Description>
            ) : (
              <Description term="公积金账户名称">{dataInfo.accoName}</Description>
            )}
            <Description term="统一社会信用代码">{dataInfo.uniCreditCode}</Description>
            <Description term="地区">{dataInfo.areaName}</Description>
            <Description term="单位名称">{dataInfo.orgName}</Description>
            {isSocial ? (
              <Description term="所属社保机构">{dataInfo.insOrg}</Description>
            ) : (
              <Description term="所属公积金机构">{dataInfo.accuOrg}</Description>
            )}
            <Description term="支付方式">{dataInfo.payWayName}</Description>
            <Description term="银行账户信息">
              {(dataInfo.custBankName ? dataInfo.custBankName : '') + dataInfo.custBankId}
            </Description>
            {isSocial ? (
              <Description term="社保组合">{dataInfo.plcyName}</Description>
            ) : (
              <Description term="公积金组合">{dataInfo.plcyName}</Description>
            )}
            {isSocial ? (
              <Description term="缴纳险种">{dataInfo.insKindsName}</Description>
            ) : (
              <Description term="是否突破上限">{dataInfo.exceedCeilingFlagName}</Description>
            )}
            <Description term="备注">{dataInfo.remark}</Description>
          </DescriptionList>
        </Modal>
      </div>
    );
  }
}
